<template>
    <div>
        <van-nav-bar title="黑马头条-登录">
        </van-nav-bar>
        <van-form @submit="onSubmit">
            <van-field
                v-model="user.mobile"
                name="mobile"
                label="手机号"
                required
                placeholder="手机号"
                :rules="[{ required: true, message: '请填写手机号',pattern :/^1[3-9]\d{9}$/}]"
            />
            <van-field
                v-model="user.code"
                type="password"
                name="code"
                label="密码"
                required
                placeholder="密码"
                maxlength=15
                :rules="[{ required: true, message: '请填写密码' }]"
            />
            <div style="margin: 16px;">
                <van-button round block type="info"
                :loading="isLoading"
                :disabled ="isLoading"
                loading-text="正在加载中..."
                native-type="submit">登录</van-button>
            </div>
            </van-form>
    </div>
</template>

<script>
// import { Notify } from 'vant'
import { loginAPI } from '@/api'
import { setToken } from '@/utils/token'
import { myNotify } from '@/ui/Notify'
export default {
  name: 'MyLogin',
  data () {
    return {
      user: {
        mobile: '13911111118', // 手机号
        code: '246810' // 验证码246810
      },
      isLoading: false
    }
  },
  methods: {
    async onSubmit () {
      this.isLoading = true
      try {
        const { data: res } = await loginAPI(this.user)
        console.log(res)
        myNotify({ type: 'success', message: '登录成功' })
        setToken(res.data.token)
        this.$router.push('layout')
      } catch (err) {
        myNotify({ type: 'warning', message: '账号或密码错误' })
      }
      this.isLoading = false
    }
  }
}
</script>

<style lang="less" scoped>
.van-nav-bar {
    background-color: #007bff;

}
/deep/ .van-nav-bar__title{
    color:#fff;
}
</style>
